<template>
  <div class="group-cover">
    <el-image :src="comCover" class="item-cover" fit="cover">
      <div class="image-slot" slot="error">
        <div class="el-icon-picture">
          <h4>请添加头图</h4>
          <p class="tips">支持8MB内的JPG／JPEG／BMP／PNG格式的高清图片</p>
          <p class="tips">（建议大于960*540像素）</p>
        </div>
        <div class="item-mask" />
      </div>
    </el-image>
    <input :accept="accept" @change="checkFileHandler" class="item-uploader" type="file" />
    <div class="cut-image__wrapper" v-if="cutImageModuleShow">
      <cutImageModule
        :image="imageFile"
        @cancel="cutImageModuleShow = false"
        @cutComplete="cutCompleteHandler"
        title="设置文章头图"
      />
    </div>
  </div>
</template>

<script>
import cutImageModule from '@/components/CutCoverModule/index.vue';

export default {
    name: 'ArticleCoverModule',
    components: {
        cutImageModule,
    },
    props: {
        cover: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            accept: 'image/jpeg, image/jpg, image/png, image/bmp',
            newCover: '',
            imageFile: null,
            cutImageModuleShow: false,
        };
    },
    computed: {
        comCover() {
            return this.newCover || this.cover;
        },
    },
    methods: {
        checkFileHandler(evt) {
            const [file] = evt.target.files;
            if (!this.verifyFile(file)) {
                this.$message.error('文件格式不正确!');
                return;
            }
            this.imageFile = file;
            this.cutImageModuleShow = true; // 选择文件 弹出图片剪裁框
            evt.target.value = null;
        },
        verifyFile(file) {
            return file.type && this.accept.indexOf(file.type) !== -1;
        },
        previewCover(file) {
            try {
                const blob = window.URL.createObjectURL(file);
                this.newCover = blob;
            } catch (error) {
                this.newCover = file;
            }
        },
        cutCompleteHandler({ blob, file }) {
            this.cutImageModuleShow = false;
            this.previewCover(blob);
            this.$emit('change', file); // 这里给它父级抛出去图片文件
        },
    },
};
</script>

<style lang="scss" >
.group-cover {
  position: relative;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  &:hover {
    .item-mask {
      opacity: 1;
    }
  }
  .item-cover,
  .item-uploader,
  .item-mask,
  .image-slot {
    width: 100%;
    min-height: 240px;
  }
  .item-cover {
    border-radius: 4px 4px 0 0;
  }
  .item-uploader,
  .item-mask {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
  .item-mask {
    background-color: rgba($color: #000000, $alpha: 0.1);
    transition: opacity 0.3s;
  }
  .image-slot {
    background-color: #f8f8f8;
    .el-icon-picture {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: #aaa;
      &::before {
        font-size: 40px;
      }
      p {
        font-size: 12px;
      }
    }
  }
  .cut-image__wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba($color: #000000, $alpha: 0.5);
  }
}
</style>
